<template>
  <div>
    <div class="flex justify-between items-center">
      <a-breadcrumb>
        <a-breadcrumb-item>患者管理</a-breadcrumb-item>
        <a-breadcrumb-item>基础信息</a-breadcrumb-item>
      </a-breadcrumb>
      <a-button class="border-none" icon="rollback" @click="rollback">返回列表</a-button>
    </div>
    <a-card
      class="min-h-[68px] rounded my-[10px]"
      :body-style="{padding: '12px 30px', height:'100%'}"
      :bordered="false"
    >
      <div class="flex justify-between items-center mb-2">
        <div class="text-base text-black font-bold">患者信息</div>
        <div>
          <a-button type="primary" @click="bindDocter">绑定医生</a-button>
          <a-popconfirm title="确认注销此患者？" @confirm="destory">
            <a-button type="primary" class="ml-3" :disabled="patientDetail.UserDestory==2">患者注销</a-button>
          </a-popconfirm>
          <!-- <a-button type="primary">患者状态修改</a-button> -->
        </div>
      </div>
      <div class="grid pb-2 grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-1">
        <div class="pt-[15px] bg-white">患者ID: {{patientDetail.UserId}}</div>
        <div class="pt-[15px] bg-white">患者姓名: {{patientDetail.UserName}}</div>
        <div class="pt-[15px] bg-white">身份证号: {{patientDetail.UserIdentity}}</div>
        <div class="pt-[15px] bg-white">手机号: {{patientDetail.UserPhone}}</div>
        <div class="pt-[15px] bg-white">性别: {{patientDetail.UserGender==1?'男':'女'}}</div>
        <div class="pt-[15px] bg-white">出生日期: {{patientDetail.UserBorn}}</div>
        <div class="pt-[15px] bg-white">职业: {{patientDetail.PiJobs}}</div>
        <div
          class="pt-[15px] bg-white"
        >患者状态: {{patientDetail.UserDestory==2?'已注销': patientDetail.UserStatus==0?'禁用':'启用'}}</div>
      </div>
    </a-card>

    <a-row :gutter="12">
      <a-col :lg="24" :xl="16">
        <a-breadcrumb>
          <a-breadcrumb-item>患者管理</a-breadcrumb-item>
          <a-breadcrumb-item>综合管理</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card
          class="min-h-[400px] h-full rounded my-[10px]"
          :body-style="{padding: '12px', height:'100%'}"
          :bordered="false"
        >
          <a-menu
            mode="horizontal"
            :selectedKeys="selectedKeys"
            type="inner"
            class="bg-transparent mb-2"
            @select="menuChange"
          >
            <template v-for="item in manageList">
              <a-menu-item :key="item.key">{{item.title}}</a-menu-item>
            </template>
          </a-menu>
          <a-table
            ref="table"
            size="small"
            class="h-full"
            :columns="columnsArr[selectedKeys[0]]"
            :dataSource="list"
            :pagination="pagination"
            @change="tableChange"
            :loading="listLoading"
            :rowKey="(record,index)=>{return index}"
          >
            <template slot="Between2Date" slot-scope="text, record">{{text}}天</template>
            <template slot="punchPercentage" slot-scope="text, record">{{text}}/100</template>
            <template slot="DpfuStatus" slot-scope="text, record">{{statusList[text?text:0] }}</template>
            <template slot="Percentage" slot-scope="text, record">{{text}}/100</template>
            <template slot="action" slot-scope="text, record">
              <!-- <a @click="details(record.Id)">查看资料</a> -->
              <span class="flex">
                <a-button
                  v-if="selectedKeys[0]==0"
                  type="link"
                  block
                  @click="editMedial(record.Id)"
                >修改</a-button>
                <a-button
                  v-if="selectedKeys[0]==1"
                  type="link"
                  block
                  @click="editHealthfile(record.Id)"
                >修改</a-button>
                <a-button
                  v-if="selectedKeys[0]==2"
                  type="link"
                  block
                  @click="editManagePlan(record.Id)"
                >修改</a-button>
                <a-button
                  v-if="selectedKeys[0]==2"
                  type="link"
                  block
                  @click="managePlanDetail(record.Id)"
                >查看</a-button>
                <a-button
                  v-if="selectedKeys[0]==3"
                  type="link"
                  block
                  @click="editFollowup(record)"
                >修改</a-button>
                <a-button
                  v-if="selectedKeys[0]==3"
                  type="link"
                  block
                  @click="followupDetail(record)"
                >查看</a-button>
              </span>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :lg="24" :xl="8">
        <a-breadcrumb>
          <a-breadcrumb-item>患者管理</a-breadcrumb-item>
          <a-breadcrumb-item>生命周期</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card
          class="min-h-[300px] h-full rounded my-[10px]"
          :body-style="{padding: '20px 12px', height:'100%'}"
          :bordered="false"
        >
          <a-timeline
            v-if="timeline.length>0"
            class="min-h-[130px] max-h-[500px] overflow-y-auto pt-2"
          >
            <template v-for="item in timeline">
              <a-timeline-item>
                <p>{{item.StlCreatetime}}</p>
                <p class="font-bold">{{item.StlTitle}}</p>
                <p>{{item.StlInfo}}</p>
              </a-timeline-item>
            </template>
          </a-timeline>
          <div v-else class="flex-1 flex justify-center items-center">
            <a-empty />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <bind-docter ref="bindDocter" @succeed="init" />
    <edit-healthfile ref="editHealthfile" @succeed="init" />
    <edit-medial ref="editMedial" @succeed="init" />
    <edit-managePlan ref="editManagePlan" @succeed="init" />
    <manage-planDetail ref="managePlanDetail" @succeed="init" />
    <edit-followup ref="editFollowup" @succeed="init" />
    <followup-detail ref="followupDetail" @succeed="init" />
  </div>
</template>

<script>
import {
  getPatientDetail,
  getMedialList,
  getHealthfileList,
  getManageplanList,
  getFollowupList,
  getTimeline,
  destoryDocter,
} from '@/api/index'
import BindDocter from './components/bindDocter.vue'
import EditHealthfile from './components/editHealthfile.vue'
import EditMedial from './components/editMedial.vue'
import EditManagePlan from './components/editManagePlan.vue'
import ManagePlanDetail from './components/managePlanDetail.vue'
import EditFollowup from './components/editFollowup.vue'
import FollowupDetail from './components/followupDetail.vue'

const columnsArr = [
  [
    {
      title: '病例ID',
      dataIndex: 'Id',
      align: 'center',
      scopedSlots: { customRender: 'Id' },
    },
    {
      title: '病例建档日期',
      dataIndex: 'DpecCollectionCreatetime',
      align: 'center',
      scopedSlots: { customRender: 'DpecCollectionCreatetime' },
    },
    {
      title: '患者自述',
      dataIndex: 'DpecInfo',
      align: 'center',
      scopedSlots: { customRender: 'DpecInfo' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '120px',
      scopedSlots: { customRender: 'action' },
    },
  ],
  [
    {
      title: '档案ID',
      dataIndex: 'Id',
      align: 'center',
      scopedSlots: { customRender: 'Id' },
    },
    {
      title: '症状描述',
      dataIndex: 'DphfInfo',
      align: 'center',
      scopedSlots: { customRender: 'DphfInfo' },
    },
    {
      title: '创建时间',
      dataIndex: 'DphfCreatetime',
      align: 'center',
      scopedSlots: { customRender: 'DphfCreatetime' },
    },
    {
      title: '采集时间',
      dataIndex: 'DphfCollectionCreatetime',
      align: 'center',
      scopedSlots: { customRender: 'DphfCollectionCreatetime' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '120px',
      scopedSlots: { customRender: 'action' },
    },
  ],
  [
    {
      title: '周期',
      dataIndex: 'Between2Date',
      align: 'center',
      scopedSlots: { customRender: 'Between2Date' },
    },
    {
      title: '计划描述',
      dataIndex: 'DpmpInfo',
      align: 'center',
      scopedSlots: { customRender: 'DpmpInfo' },
    },

    {
      title: '建议',
      dataIndex: 'DpmpSuggest',
      align: 'center',
      scopedSlots: { customRender: 'DpmpSuggest' },
    },
    {
      title: '开始时间',
      dataIndex: 'DpmpStarttime',
      align: 'center',
      scopedSlots: { customRender: 'DpmpStarttime' },
    },
    {
      title: '结束时间',
      dataIndex: 'DpmpEndtime',
      align: 'center',
      scopedSlots: { customRender: 'DpmpEndtime' },
    },
    {
      title: '打卡进度',
      dataIndex: 'punchPercentage',
      align: 'center',
      scopedSlots: { customRender: 'punchPercentage' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '120px',
      scopedSlots: { customRender: 'action' },
    },
  ],
  [
    {
      title: '随访ID',
      dataIndex: 'Id',
      align: 'center',
      scopedSlots: { customRender: 'Id' },
    },
    {
      title: '随访介绍',
      dataIndex: 'DpfuInfo',
      align: 'center',
      scopedSlots: { customRender: 'DpfuInfo' },
    },
    {
      title: '状态',
      dataIndex: 'DpfuStatus',
      align: 'center',
      scopedSlots: { customRender: 'DpfuStatus' },
    },
    {
      title: '执行进度',
      dataIndex: 'Percentage',
      align: 'center',
      scopedSlots: { customRender: 'Percentage' },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '120px',
      scopedSlots: { customRender: 'action' },
    },
  ],
]

export default {
  components: {
    BindDocter,
    EditMedial,
    EditHealthfile,
    EditManagePlan,
    ManagePlanDetail,
    EditFollowup,
    FollowupDetail,
  },
  data() {
    return {
      columnsArr,
      manageList: [
        {
          key: 0,
          title: '患者病历',
        },
        {
          key: 1,
          title: '患者健康档案',
        },
        {
          key: 2,
          title: '患者康复计划',
        },
        {
          key: 3,
          title: '患者参与随访',
        },
      ],
      selectedKeys: [0],
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => ` ${total} 条数据`,
      },
      /**table数据 */
      list: [],
      statusList: ['', '待开始', '进行中', '已完成', '已终止'],
      //表格Loading
      listLoading: false,
      patientDetail: {},
      timeline: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const uid = this.$route.query.id
      const { data: detail } = await getPatientDetail({ uid })
      const { data: timeline } = await getTimeline({ uid, pageSize: 10000 })
      this.patientDetail = detail
      this.timeline = [...timeline.Lists]
      this.menuChange({ key: this.selectedKeys[0] })
    },
    menuChange({ key }) {
      this.selectedKeys[0] = key
      this.pagination.current = 1
      this.getList()
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true
      const { current, pageSize } = this.pagination
      const params = {
        ...{ page: current, pageSize },
        id: this.patientDetail.UserId,
      }
      try {
        let request
        switch (this.selectedKeys[0]) {
          case 0:
            request = await getMedialList(params)
            break
          case 1:
            request = await getHealthfileList(params)
            break
          case 2:
            request = await getManageplanList(params)
            break
          case 3:
            request = await getFollowupList(params)
            break
        }
        const { data } = request
        const { Page, PageSize, Total, Lists } = data
        this.list = Lists || []
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        this.list = []
        this.$message.error(error)
      } finally {
        this.listLoading = false
      }
    },
    /**
     * 切换状态
     * @param {*} userId
     */
    async changeStatus(id) {
      try {
        this.userId = id
        await changeDocterStatus({ id })
        this.$message.success('修改成功')
        this.init()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.userId = 0
      }
    },
    bindDocter() {
      const id = this.patientDetail.UserId
      this.$refs.bindDocter.open(id)
    },
    async destory() {
      const id = this.patientDetail.UserId
      try {
        await destoryDocter({ id })
        this.$message.success('操作成功！')
        this.init()
      } catch (error) {
        this.$message.error(error)
      }
    },
    editMedial(id) {
      this.$refs.editMedial.open(id)
    },
    editHealthfile(id) {
      this.$refs.editHealthfile.open(id)
    },
    editManagePlan(id) {
      this.$refs.editManagePlan.open(id)
    },
    managePlanDetail(id) {
      this.$refs.managePlanDetail.open(id)
    },
    editFollowup(record) {
      this.$refs.editFollowup.open(record)
    },
    followupDetail(record) {
      this.$refs.followupDetail.open(record)
    },
    rollback() {
      this.$router.go(-1)
    },
  },
}
</script> 
